<template>
    <fl-navBar dark :border="false" title="新建日程" color="#000000" fixed background-color="#ffffff" status-bar
        left-icon="left" />
    <view class="ownplanAdd_cell">
        <view class="left_title">类型</view>
        <view class="right_par">

            <text v-if="type === 'add' || type == 1 || type == 2" :class="{ 'ac': curr == 0 }"
                @tap="clickType(0)">出行报备</text>
            <text v-if="type === 'add' || type == 111" :class="{ 'ac': curr == 1 }" @tap="clickType(1)">个人日程</text>
        </view>
    </view>
    <view class="AskApply_com">
        <AskApply :detailData="detailData" :flag="1" :type="1" :status="detailData.status" v-if="curr == 0" />
    </view>

    <view class="addrc" v-if="curr == 1">
        <view class="ownAskApply">
            <view class="owncell">
                <view class="left_title">
                    <text class="star">*</text>
                    开始时间
                </view>
                <view class="right_par">
                    <u-datetime-picker @close="startPicker = false" @cancel="startPicker = false" @confirm="startConfirm"
                        :show="startPicker" v-model="startTime" mode="datetime" />
                    <view class="pleaseChoose" @tap="startPicker = true">
                        <text v-if="par.startTime">{{ par.startTime }}</text>
                        <text v-else style="color:#A0A0A0">请选择</text>
                        <text class="date_icon iconfont icon-24gl-calendar"></text>
                    </view>

                </view>
            </view>
            <view class="owncell">
                <view class="left_title">
                    <text class="star">*</text>
                    结束时间
                </view>
                <view class="right_par">
                    <u-datetime-picker @close="endPicker = false" @cancel="endPicker = false" @confirm="endConfirm"
                        :show="endPicker" v-model="endTime" mode="datetime" />
                    <view class="pleaseChoose" @tap="endPicker = true">
                        <text v-if="par.endTime">{{ par.endTime }}</text>
                        <text v-else style="color:#A0A0A0">请选择</text>
                        <text class="date_icon iconfont icon-24gl-calendar"></text>
                    </view>

                </view>
            </view>
            <view class="owncom">
                <view class="left_title">
                    <text class="star">*</text>
                    内容
                </view>
                <view class="right_par">
                    <textarea @input="bindTextAreaBlur" :value="par.content" style="padding-top: 10rpx;height: 100rpx;"
                        placeholder-style="color:#A0A0A0" placeholder="请输入" />
                </view>
            </view>
        </view>
        <view class="confire" :style="{ bottom: safeAreaInsets.bottom + 'px' }">
            <view class="qx" @tap="navBack">返回</view>
            <view v-if="type !== 'add'" class="qx del" @tap="deleteSchdule">删除</view>
            <view v-if="type !== 'add'" class="qd" @tap="handleEditForget">编辑</view>
            <view v-if="type === 'add'" @tap="disabled ? message() : handleSubmit(2)"
                :class="disabled ? 'disable qd' : 'qd'">
                提交
            </view> 
        </view>
    </view>
</template>
  
<script setup>
import { ref, computed } from 'vue'
import { jobForget, manageDetail } from '@/api/http'
import { formatTimestamp } from '@/utils/common'
import AskApply from '../outReport/AskApply.vue'
import modal from '@/plugins/modal'
import { getownManageDetail, editForget, getownManageDelete } from '@/api/http'
import { onLoad } from "@dcloudio/uni-app";
const { safeAreaInsets } = uni.getSystemInfoSync()
const curr = ref(0)
const endTime = ref(new Date().getTime())
const startTime = ref(new Date().getTime())
const startPicker = ref(false)
const endPicker = ref(false)
const detailData = ref('')
const par = ref({
    content: '',
    endTime: '',
    startTime: ''
})
const props = defineProps({
    id: {},
    type: {
        default: ''
    }
})
// type==1 出行报备查看 type==111 个人行程查看
onLoad(() => {
    if (props.type || props.id) {
        if (props.type == 1 || props.type == 2) {
            // 出行报备 查看/编辑
            curr.value = 0
        } else if (props.type == 111) {
            // 个人日程 查看
            curr.value = 1
        }
        getList()
    }
    // console.log(props.type, '1111');
})
// 删除 日程
const deleteSchdule = async () => {
    const { name, startTime, endTime, id } = par.value
    let str = `是否确认删除${name}${startTime}-${endTime}期间的数据项？`
    const res = await modal.confirm(str)
    if (res) {
        await getownManageDelete(id)
        modal.msgSuccess('操作成功')
        setTimeout(() => {
            uni.navigateBack()
        }, 1000);
    }
}
// 编辑 日程 
const handleEditForget = async () => {
    const { startTime, endTime, content } = par.value
    if (!startTime || !endTime || !content) return modal.msgError('请完善必填项')
    await editForget(par.value)
    modal.msgSuccess('操作成功')
    setTimeout(() => {
        uni.navigateBack()
    }, 1000);
}
const getList = async () => {
    // add 新建日程页面过来
    if (props.type !== 'add') {
        if (props.type == 1 || props.type == 2) {
            const res = await manageDetail(props.id)
            detailData.value = res.data
        } else {
            const res = await getownManageDetail(props.id)
            par.value = res.data
        }
    }


}

const disabled = computed(() => {
    const { content, endTime, startTime } = par.value
    if (content && endTime && startTime) return false
    return true
})
const bindTextAreaBlur = (e) => {
    par.value.content = e.detail.value
}
const startConfirm = (e) => {
    par.value.startTime = formatTimestamp(e.value)
    startPicker.value = false
}
const endConfirm = (e) => {
    par.value.endTime = formatTimestamp(e.value)
    endPicker.value = false
}
const clickType = (t) => {
    curr.value = t
}
const navBack = () => {
    uni.navigateBack()
}
const message = () => {
    uni.showToast({ title: '请完善必填项', icon: 'error' })
}
const handleSubmit = async () => {
    let cop = JSON.parse(JSON.stringify(par.value))
    cop.endTime = cop.endTime + ':00'
    cop.startTime = cop.startTime + ':00'
    const res = await jobForget(cop)

    modal.msgSuccess('操作成功')
    setTimeout(() => {
        uni.navigateBack()
    }, 1000);
}
</script>
  
<style scoped lang="scss">
page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}


.confire {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 30rpx;

    .qd,
    .qx,
    .bc {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 220rpx;
        height: 90rpx;
        border-radius: 44rpx;
        background-color: #fff;
        border: 2rpx solid #DCDCDC;

        font-size: 28rpx;
        color: #000;

    }


    .qd {
        background-color: #0D80D7;
        border: none;
        color: #fff;
    }

    .del {
        background-color: red;
        border: none;
        color: #fff;
    }

    .disable {
        background-color: #a7c0db;
    }
}

.qd {
    background-color: #0D80D7;

    color: #fff;
}

.disable {
    background-color: #a7c0db;
}

.owncell {
    display: flex;
    justify-content: space-between;
    padding: 25rpx 10rpx;
    border-bottom: 2rpx solid #D6DBE3;
    font-size: 28rpx;
    color: #333333;

    .noedit {
        color: #333333 !important;
    }


    .left_title {
        position: relative;
        font-size: 30rpx;

        .star {
            position: absolute;
            color: red;
            left: -15rpx;
            top: 50%;
            transform: translateY(-50%);
            font-size: 35rpx;

        }

    }

    .right_par {
        display: flex;
        color: #a0a0a0;

        .file_list {
            width: 500rpx;
            margin-top: 20rpx;


        }

        .pleaseChoose {
            display: flex;
            align-items: center;
            color: #333;

        }

        .iconfont {
            color: #97A3B7;
            font-size: 38rpx;
            margin-left: 5rpx;
        }

        .showTime {
            display: flex;
            align-items: center;
            font-size: 29rpx;
            color: #333333;
        }

        .choose_icon {
            color: #8d8d8d;
            font-size: 40rpx;
        }
    }




}

.AskApply_com {
    flex: 1;
    height: 100%;
}

.addrc {
    height: 100%;
}

.ownAskApply {
    width: 94%;
    flex: 1;
    height: 100%;
    margin: 0 auto;
}

.ownplanAdd_cell {
    width: 94%;
    // height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25rpx 10rpx;
    border-bottom: 2rpx solid #D6DBE3;
    font-size: 28rpx;
    color: #333333;



    .left_title {
        position: relative;
        font-size: 30rpx;

        .star {
            position: absolute;
            color: red;
            left: -15rpx;
            top: 50%;
            transform: translateY(-50%);
            font-size: 35rpx;

        }

    }

    .right_par {
        display: flex;
        color: #a0a0a0;

        text {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 160rpx;
            height: 60rpx;
            color: #333333;
            border-radius: 8rpx;
            margin-left: 20rpx;
            font-size: 28rpx;
            border: 1px solid #EBEDF0;

        }

        .ac {
            background-color: #0d80d7;
            border: none;
            color: #ffffff;
        }
    }




}

.owncom {
    padding: 25rpx 10rpx;
    border-bottom: 2rpx solid #D6DBE3;
    font-size: 28rpx;
    color: #333333;

    .left_title {
        position: relative;

        .star {
            position: absolute;
            color: red;
            left: -15rpx;
            top: 50%;
            transform: translateY(-50%);
            font-size: 35rpx;

        }
    }
}
</style>
  